<template>
  <div class="top">
    <div class="left">
      <img :src="logo"></img>
    </div>
    <div class="center">
      <input v-model="keyword" class="search-input" maxlength="30" placeholder="书名、作者、关键字"
             type="text" @keydown.enter="handleSearch">
      <div class="search-icon" @click="handleSearch">
        <!-- 使用svg或者字体图标库插入放大镜图标 -->
        <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </svg>
      </div>
    </div>
    <div class="right">

      <div class="top-shelf">
        <i class="iconfont icon-wodeshujia" style="font-size: 25px"/>
        <div>书架</div>
      </div>
      <el-dropdown>
        <el-avatar :src="userPhoto?imgBaseUrl+userPhoto:author_head" @click="showDialog = true"></el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <router-link :to="{name:'userSetup'}" style="text-decoration: none">个人中心</router-link>
            </el-dropdown-item>
            <el-dropdown-item @click="logout()">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="top-login">
        <div v-if="!token">
          <RouterLink to="/login">登录</RouterLink>
          &nbsp;
          <RouterLink to="/register">注册</RouterLink>
        </div>
        <div>
          {{ nickName }}
        </div>
      </div>

    </div>
  </div>
</template>
<script lang="ts" setup>
import logo from "@/assets/images/logo.png";
import author_head from '@/assets/images/author_head.png'
import {reactive, ref, toRefs, watch} from "vue";
import {useAuthStore} from "@/stores/auth";
import {storeToRefs} from "pinia";
import router from "@/router";
import emitter from "@/utils/bus";
import {useSearchStore} from "@/stores/search";

const authStore = useAuthStore();
const searchStore = useSearchStore();
const {nickName, token, userPhoto} = storeToRefs(authStore)
// 示例数据
const showDialog = ref(true);
const searchKeyword = ref('');
const state = reactive({
  keyword: "",
  baseUrl: import.meta.env.VITE_APP_BASE_API_URL,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL,
});
const {baseUrl, imgBaseUrl} = toRefs(state)
const {keyword} = storeToRefs(searchStore)
const handleSearch = () => {
  // 调用搜索方法或提交表单等操作...
  router.push({path: "/book_class", query: {key: keyword.value}});
  emitter.emit("eventSearch", keyword.value);
  searchStore.setSerachKey(keyword.value)
};
const logout = () => {
  authStore.logout()
  //跳转到登录页面
  router.push('/login');
};


</script>

<style lang="scss" scoped>
.top {
  width: 60%;
  //border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  //background-color: orange;
  align-items: center;
  //width: 70%;
  margin: 0 auto;
}

.left, .center, .right {
  //border: 1px solid #000;
  padding: 10px;
}

.left img {
  display: block; /* 移除底部空白 */
  width: auto;
  height: 48px;
  object-fit: cover; /* 保持宽高比的同时填满整个容器区域 */
}

//中间样式
.center {
  display: flex;
  align-items: center;
  position: relative;
}

.search-input {
  width: 250px;
  padding: 12px 40px 12px 15px;
  border: 1px solid #409EFF;
  border-radius: 20px;
  outline: none;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50%;
  padding: 5px;
  //box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.search-icon svg {
  width: 23px;
  height: 23px;
}

.dialog-content {
  display: flex;
  justify-content: space-around;
}

//右侧样式
.right {
  display: flex;
  align-items: center;

  .top-shelf {
    display: flex;
    align-items: center;
    padding-right: 20px;
    cursor: pointer;
  }

  .top-login {
    display: flex;
    margin-left: 20px;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    //  去掉颜色和下划线
    a {
      color: #000;
      text-decoration: none;
    }
  }
}

</style>